<template>
	<div>
		<div class="fieldset">
			<legend>{{titleName}}</legend>
			<el-form :inline="true" class="demo-form-inline">
				<el-row>
					<el-col>
						<el-form-item label="处理： 常用语">
							<el-select name="" v-model="opinion">
								<el-option v-for="item in opinionData" :label="item.label" :key="item.value" :value="item.value"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="流转：" v-if="circulationDate.length>0">
							<el-select name="" v-model="circulation">
								<el-option v-for="item in circulationDate" :label="item.label" :key="item.value" :value="item.value"></el-option>
							</el-select>
							<span>至</span>
							<el-select name="" v-model="leveValue" v-if="circulationDate.length>0">
								<el-option v-for="item in leveSelect" :label="item.activitiName" :key="item.activitiId" :value="item.activitiId"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="preservation('optTemp')">临时保存</el-button>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="preservation('optSubmit')">提交</el-button>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col>
						<p>审批意见：</p>
						<el-input type="textarea" v-model="describe" :rows="4"></el-input>
					</el-col>
				</el-row>
			</el-form>

			<div class="process-information">
				<el-row>
					<el-col>
						<h1>流程信息：</h1>
					</el-col>
				</el-row>
				<div class="process-information-body">
					<el-row :gutter="20">
						<el-col :span="12">
							名称：<span>{{processInfo.name}}</span>
						</el-col>
						<el-col :span="12">
							发起人：<span>{{processInfo.Initiator}}</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							发起时间：<span>{{processInfo.startTime}}</span>
						</el-col>
						<el-col :span="12">
							流程定义名称：<span>{{processInfo.definitionName}}</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							流程状态：
							<span v-if="processInfo.state == true">运行中</span>
							<span v-if="processInfo.state == false">非运行中</span>
						</el-col>
						<el-col :span="12">
							优先级：<span>{{processInfo.priority}}</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							处理时长：
							<span>{{processInfo.durationInMillis}}</span>
						</el-col>
						<el-col :span="12">
							结束时间：<span>{{processInfo.endTime}}</span>
						</el-col>
					</el-row>
				</div>
			</div>

			<div class="rendering-form" id="huoduan_frame">
				<!--rendering-form   v-if="hasHisFormData==true "-->

				<div v-if="formData.length>0" v-for="(item,index) in formData">
					<div class="tex-center" v-if="hasHisFormData==true ">
						<el-button type="primary" @click="loadForm">加载</el-button>
					</div>
					<iframe frameborder="0" :id="item.id" :src="item.url" width="100%" @load="formLoaded"></iframe>
				</div>
			</div>
		</div>
		<div class="step">
			<el-row :gutter=20>
				<el-col :span="6" v-for="item in seeForm">
					<el-card>
						<div class="text item">
							{{'处理人 ' +item.assignee }}
						</div>
						<div class="text item">
							{{'处理意见 ' +item.formKey }}
						</div>
						<div class="text item">
							{{'审批时间 ' +item.endTime }}
						</div>
						<div class="text item">
							{{'处理时长 ' +item.durationInMillis }}
						</div>
						<div class="text item">
							{{'任务创建时间 ' +item.startTime }}
						</div>
						<div class="bottom clearfix">
							<el-button type="primary" @click="viewForm(item)" v-if="item.isShow==true">查看表单</el-button>
							<el-button type="primary" @click="seeEnclosure" v-if="item.atmount>0">查看附件</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<el-row>
			<el-col :span="12">
				<div class="dialog">
					<div class="pop">
						<h2>上传</h2>
						<p>
							<el-button id="browse" type="primary">选择文件</el-button>
							<el-button id="upload-btn" type="success">开始上传</el-button>
							<el-button id="upload-btn1" type="danger">暂停</el-button>
						</p>
						<ul id="file-list">
						</ul>
					</div>
				</div>
				<div class="model"></div>
			</el-col>

			<el-col :span="12">
				<div class="already-upload">
					<ul>
						<h2>已上传</h2>
						<li>
							<!--v-for="item in attachments  {{item.name}}"-->
							<span>shedeh</span>
							<!--<span><el-button type="danger">删除</el-button></span>-->
						</li>
					</ul>
				</div>
			</el-col>
		</el-row>

		<el-dialog title="查看表单" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
			<div id="dialog-form">
				<!--"http://localhost/activiti-web/activitiTemplate/test01.form?processInstanceId=1182501&&taskInstanceId=1185007"-->
				<!--<iframe frameborder="0"  src="http://localhost/activiti-web/activitiTemplate/test01.form?processInstanceId=1182501&&taskInstanceId=1185007" width="100%"></iframe>-->
				<div v-for="item in diaFormData">
					<!--<p>{{item.url}}</p>-->
					<iframe frameborder="0" :id="item.id" :src="item.url" width="100%" @load="diaLoad"></iframe>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="查看附件" :visible.sync="uploadVisible" width="90%" :before-close="handleClose">
			<ul>
				<h2>已上传</h2>
				<li v-if="formUpload.length>0" v-for="item in formUpload">
					<!--v-for="item in attachments  {{item.name}}"-->
					<span>{{item.name}}</span>
					<!--<span><el-button type="danger">删除</el-button></span>-->
				</li>
			</ul>
			<span slot="footer" class="dialog-footer">
    <el-button @click="uploadVisible = false">取 消</el-button>
    <el-button type="primary" @click="uploadVisible = false">确 定</el-button>
  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'handle',
		data() {
			return {
				describe: '',
				opinion: '',
				opinionData: [],
				circulation: '',
				circulationDate: [],
				linkageValue: [],
				leveSelect: [],
				leveValue: '',
				titleName: '',
				processInfo: {
					name: '',
					approvalOpinion: '',
					Initiator: '',
					startTime: '',
					definitionName: '',
					state: '',
					priority: '',
					durationInMillis: '',
					endTime: '',
				},
				formData: [],
				diaFormData: [],
				seeForm: [],
				ifrmUrl: [],
				processInstanceId: '',
				taskInstanceId: '',
				processDefinitionId: '',
				taskDefKey: '',
				hasHisFormData: false,
				executionId: '',
				iframeData: [],
				taskDefinitionKey: '',
				initFormData: [],
				attachments: [], //附件
				dialogVisible: false,
				hisFrmData: [],
				formUpload: [],
				uploadVisible: false,

			}
		},
		mounted: function() {
			var _this = this
			_this.taskInstanceId = localStorage.getItem('taskInstanceId');
			_this.processInstanceId = localStorage.getItem('processInstanceId');
			_this.processDefinitionId = localStorage.getItem('processDefinitionId')
			var uploader = new plupload.Uploader({
				browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id
				url: "http://localhost/activiti-web/upload", //服务器端的上传页面地址
				runtime: 'post',
				flash_swf_url: 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
				silverlight_xap_url: 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
				// Maximum file size
				max_file_size: '10m',
				drop_element: '.pop',
				chunk_size: 0,
				drop_element: 'file-list',
				multipart: true,
				use_http_method: 'post',
				filters: {
					max_file_size: 10240000,
					prevent_duplicates: false
					//不允许选取重复文件s
				},
			});
			//在实例对象上调用init()方法进行初始化
			uploader.init();
			//绑定文件添加进队列事件
			uploader.bind('FilesAdded', function(uploader, files) {
				for(var i = 0, len = files.length; i < len; i++) {
					var file_name = files[i].name; //文件名
					var str = "<a class='pic_delete' data-val='" + files[i].id + "'>删除</a>";
					//构造html来更新UI
					var html = '<li id="' + files[i].id + '" class="file" ><p class="file-name">' + file_name + '' + str + '</p><p class="progress"></p></li>';
					$(html).appendTo('#file-list');
				}
			});
			$(document).on('click', '.pic_delete', function() {
				$(this).parent().remove();
				//uploader.removeFile($(this).attr("data-val"));
				var toremove = '';
				var id = $(this).attr("data-val");
				for(var i in uploader.files) {
					if(uploader.files[i].id === id) {
						toremove = i;
					}
				}
				$('#' + id + '').hide(); //控制进度条
				uploader.files.splice(toremove, 1);
				//							console.log("" + $(this).attr("data-val"));
			});
			//绑定文件上传进度事件
			uploader.bind('UploadProgress', function(uploader, file) {
				$('#' + file.id + ' .progress').css('width', file.percent + '%'); //控制进度条
				$('#' + file.id + ' .progress').text(file.percent + '%'); //控制进度条
			});
			//上传错误
			uploader.bind('Error', function(uploader, err) {
				switch(err.code) {
					case 5:

						_this.$message({
							message: "上传完成！",
							type: 'success'
						});

						break;
					case -602:
						_this.$message({
							message: "不允许上传重复的文件！",
							type: 'error'
						});

						break;
					case -200:
						_this.$message({
							message: "网络错误！",
							type: 'error'
						});
						$('.pic_delete').remove();
						$(".file").remove();
						break;
					case -600:
						_this.$message({
							message: "文件超过限制！",
							type: 'error'
						});

						break;
					case -500:
						_this.$message({
							message: "报错500！",
							type: 'error'
						});
						$('.pic_delete').remove();
						$(".file").remove();
						break;
					default:
						_this.$message({
							message: "服务器繁忙,请稍后重试！",
							type: 'error'
						});
						$('.pic_delete').remove();
						$(".file").remove();
						break;
				}
			});
			uploader.bind('removeFile', function(name) {});
			uploader.bind('FileUploaded', function(a, b, c) {
				_this.$emit('reFresh');
				_this.$message({
					message: "上传成功",
					type: 'success'
				});
				$('.pic_delete').remove();
				$(".file").remove();
				console.log('111')
			});
			//上传之前设置后端需要值
			uploader.bind('BeforeUpload', function(up, file) {
					uploader.setOption("multipart_params", {
						"processInstanceId": _this.processInstanceId,
						"taskId": _this.taskInstanceId,
					});
				}),
				//上传按钮
				$('#upload-btn').click(function() {
					uploader.start(); //开始上传

				});
			$('#upload-btn1').click(function() {
				uploader.stop(); //停止上传
				_this.$message({
					message: "停止",
					type: 'error'
				});
			});
			var vm = this
			console.log(localStorage.getItem('taskInstanceId'));
			console.log(localStorage.getItem('processInstanceId'));
			console.log(localStorage.getItem('processDefinitionId'));
			//			vm.taskInstanceId = "645052";
			//			vm.processInstanceId = "645042"
			//			vm.processDefinitionId = "workflow-test-01:3:175008"
			vm.taskInstanceId = localStorage.getItem('taskInstanceId');
			vm.processInstanceId = localStorage.getItem('processInstanceId');
			vm.processDefinitionId = localStorage.getItem('processDefinitionId')
			var dataT = {
				processInstanceId: vm.processInstanceId,
				taskInstanceId: vm.taskInstanceId
			};
			//查询工作流测试借口
			this.$http.post('http://localhost/act/taskInstance/getTaskInstance?processInstanceId=' + vm.processInstanceId + "&&taskInstanceId=" + vm.taskInstanceId).
			then(function(data) {
				if(data.data.messageCode != 0) {
					vm.$message({
						message: data.data.message,
						type: 'error'
					});
					return;
				}
				vm.taskDefinitionKey = data.data.object.taskEntity.taskDefinitionKey
				vm.taskDefKey = data.data.object.taskDefKey
				vm.titleName = data.data.object.processInstance.name;
				for(var key in data.data.object.audits) {
					var talk = {};
					talk.value = data.data.object.audits[key]
					talk.lable = key;
					vm.opinionData.push(talk)
				}
				//				console.log( data.data.object.processInstance.transitions)
				if(data.data.object.transitions != undefined) {
					vm.linkageValue = data.data.object.transitions
					console.log(vm.linkageValue)
					var transitions = data.data.object.transitions;
					if(transitions.transReturns != undefined && transitions.transReturns.length > 0) {
						var talk = {};
						talk.value = 'transReturns',
							talk.label = "回退"
						vm.circulationDate.push(talk)
					}
					if(transitions.transForwards != undefined && transitions.transForwards.length > 0) {
						var talk = {};
						talk.value = 'transForwards',
							talk.label = "跳转"
						vm.circulationDate.push(talk)
					}
				}
				vm.executionId = data.data.object.taskEntity.executionId
				Date.prototype.Format = function(fmt) { //author: meizz 
					var o = {
						"M+": this.getMonth() + 1, //月份 
						"d+": this.getDate(), //日 
						"h+": this.getHours(), //小时 
						"m+": this.getMinutes(), //分 
						"s+": this.getSeconds(), //秒 
					};
					if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
					for(var k in o)
						if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					return fmt;
				} //转换后端的日期格式
				vm.processInfo.name = data.data.object.processInstance.name;
				vm.processInfo.Initiator = data.data.object.processInstance.startUserId;
				vm.processInfo.startTime = new Date(data.data.object.processInstance.startTime).Format("yyyy-MM-dd hh:mm:ss");
				vm.processInfo.definitionName = data.data.object.processInstance.processDefinitionName;
				vm.processInfo.state = data.data.object.processInstance.active;
				vm.processInfo.priority = data.data.object.processInstance.processPriority;
				if(data.data.object.processInstance.durationInMillis == undefined) {
					vm.processInfo.durationInMillis = undefined;
				} else {
					vm.processInfo.durationInMillis = data.data.object.processInstance.durationInMillis;
				}
				if(data.data.object.processInstance.endTime == undefined) {
					vm.processInfo.endTime = undefined;
				} else {
					vm.processInfo.endTime = data.data.object.processInstance.endTime;
				}
				vm.attachments = data.data.object.attachments;
				var formKey = data.data.object.taskEntity.formKey;
				if(formKey != null) {
					var formName = formKey.split(",")
				}
				if(data.data.object.formData.length > 0) {
					vm.initFormData = data.data.object.formData
				}
				vm.hasHisFormData = data.data.object.hasHisFormData;

				//根据上个借口得知几个表单 然后拿到请求表单 通过iframe打开
				console.log(formName)
				if(formName != undefined && formName.length != 0) {
					for(var i = 0; i < formName.length; i++) {
						//						http://localhost:8769/activiti-web/activitiTemplate/test01.form?processInstanceId=1&taskInstanceId=1
						//						'http://localhost/activiti-web/activitiTemplate/' + formName[i] +"/processInstanceId=" + vm.processInstanceId + "&taskInstanceId=" + vm.taskInstanceId
						vm.$http.get('http://localhost/activiti-web/activitiTemplate/' + formName[i] + '?processInstanceId=' + vm.processInstanceId + '&taskInstanceId=' + vm.taskInstanceId).then(
							function(data) {
								var url = {};
								url.url = data.config.url;
								var ifraUrlstart = data.config.url.lastIndexOf('/');
								var ifraUrlend = data.config.url.indexOf('.');
								url.id = data.config.url.substring(ifraUrlstart + 1, ifraUrlend)
								vm.formData.push(url)
							},
							function(error) {

							}
						)
					}
				}

			}, function(error) {

			});

			this.$http.post('http://localhost/act/taskInstance/getHisTaskInstances?processInstanceId=' + vm.processInstanceId).then(function(data) {
				vm.seeForm = data.data.data
				Date.prototype.Format = function(fmt) { //author: meizz 
					var o = {
						"M+": this.getMonth() + 1, //月份 
						"d+": this.getDate(), //日 
						"h+": this.getHours(), //小时 
						"m+": this.getMinutes(), //分 
						"s+": this.getSeconds(), //秒 
					};
					if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
					for(var k in o)
						if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					return fmt;
				} //转换后端的日期格式
				for(var i = 0; i < vm.seeForm.length; i++) {
					vm.seeForm[i].startTime = new Date(vm.seeForm[i].startTime).Format("yyyy-MM-dd hh:mm:ss");
					vm.seeForm[i].endTime = new Date(vm.seeForm[i].startTime).Format("yyyy-MM-dd hh:mm:ss");
					var durationInMillis = vm.seeForm[i].durationInMillis
					vm.seeForm[i].durationInMillis = formatSeconds(durationInMillis)
					if(vm.seeForm[i].formKey != null) {
						vm.seeForm[i].isShow = true;
					} else {
						vm.seeForm[i].isShow = false
					}
				};

				function formatSeconds(date3) {
					var days = Math.floor(date3 / (24 * 3600 * 1000))
					//计算出小时数
					var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000))
					//计算相差分钟数
					var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000))
					//计算相差秒数
					var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000)
					var result = "";
					if(days > 0) {
						result += days + "天";
					}
					if(hours > 0) {
						result += hours + "小时";
					}
					if(minutes > 0) {
						result += minutes + "分钟";
					}
					if(seconds > 0) {
						result += seconds + "秒";
					}
					return result;
				};

			}, function(error) {

			})
			//查询临时保存的上传附件
			this.$http.post('http://localhost/act/taskInstance/getTaskAttachments?processInstanceId=' + vm.processInstanceId + "&&taskId=" + vm.taskInstanceId).then(
				function(data) {
					console.log(data)
					vm.formUpload = data.data
				},
				function(error) {

				}
			)
		},
		watch: {
			diaFormData: function(val) {
				var vm = this
				setTimeout(function() {
					$('#form-frame iframe').each(function() {
						$(this).contents().find('body form input').attr("disabled", true)
						$(this).contents().find('body form select').attr("disabled", true)
						for(var i = 0; i < vm.hisFrmData.length; i++) {
							var id = vm.hisFrmData[i].formKey.indexOf('.');
							var iframrId = vm.hisFrmData[i].formKey.substring(0, id)
							if($(this).attr('id') == iframrId) {
								var formeD = vm.hisFrmData[i].formData.split("&")
								var obj = {};
								for(var i = 0; i < formeD.length; i++) {
									var arr = formeD[i].split('=');
									obj[arr[0]] = arr[1];
								}
								for(var key in obj) {
									$(this).contents().find('body form input[name=' + key + ']').val(obj[key])
									$(this).contents().find('body form input[type=radio][name=' + key + ']').attr("checked", obj[key])
									$(this).contents().find('body form input[type=checkbox][name=' + key + ']').attr("checked", obj[key])
									$(this).contents().find('body form select[name=' + key + ']').val(obj[key])
								}
							}
						}
						$(this).height($(this).contents().find('body').height() + 20);

					})

				}, 500)
			},

			opinion: function(val) {
				return this.describe = val
			},
			circulation(val) {
				console.log(val)
				if(val == "transReturns") {
					this.leveSelect = this.linkageValue.transReturns
					console.log(this.leveSelect)
				};
				if(val == "transForwards") {
					this.leveSelect = this.linkageValue.transForwards
				}
			},
		},
		methods: {
			preservation(type) {
				var iframeData = [];
				var vm = this;
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				$('#huoduan_frame iframe').each(function() {
					var jsonObj = $(this).contents().find("form").serialize();
					var formeD = jsonObj.split("&")
					var obj = {};
					for(var i = 0; i < formeD.length; i++) {
						var arr = formeD[i].split('=');
						obj[arr[0]] = arr[1];
					}
					var iframeDataObj = {
						processInstanceId: vm.processInstanceId,
						taskInstanceId: vm.taskInstanceId,
						formKey: $(this).attr('id') + '.form',
						processDefinitionId: vm.processDefinitionId,
						taskDefKey: vm.taskDefKey,
						formData: JSON.stringify(obj),
						taskDefKey: vm.taskDefinitionKey,
					}
					vm.iframeData.push(iframeDataObj)
				})
				var dataT = {
					processInstanceId: vm.processInstanceId,
					transitionKey: vm.circulation,
					transitionValue: vm.leveValue,
					processDefinitionId: vm.processDefinitionId,
					executionId: vm.executionId,
					taskInstanceId: vm.taskInstanceId,
					formOpt: type,
					desc: vm.describe,
					forms: vm.iframeData
				}
				this.$http.post('http://localhost/act/taskInstance/completeTaskInstance',
					dataT
				).then(function(data) {
					vm.iframeData = [];
					console.log(data.data)
					if(data.data.messageCode != 0) {
						vm.$message({
							message: data.data.message,
							type: 'error'
						});
					} else {
						vm.$message({
							message: data.data.message,
							type: 'success'
						});
						vm.$router.push({
							path: '/taskExample'
						});
					};
					loading.close();
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504) {
						vm.$message.error("网络超时，请重试")
					}

				})
			},
			loadForm() {
				var vm = this;
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				vm.$http.post('http://localhost/act/taskInstance/loadLastestTaskFormData/?processInstanceId=' + vm.processInstanceId + "&&taskInstanceId=" + vm.taskInstanceId).then(
					function(data) {
						console.log(data)
						loading.close()
					}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504) {
						that.$message.error("网络超时，请重试")
					}

				})
			},
			viewForm(item) {
				console.log(item)
				var vm = this;
				vm.diaFormData = [];
				vm.dialogVisible = true;
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				vm.$http.post('http://localhost/act/taskInstance/getTaskFormsForView?processInstanceId=' + item.processInstanceId + "&&taskInstanceId=" + item.id).then(
					function(data) {
						loading.close()
						vm.hisFrmData = data.data.data;
						console.log(vm.hisFrmData)
					}).catch(function(error) {
					loading.close();
					//					console.log(error.response.status)
					//					if(error.response.status == 504){
					//						that.$message.error("网络超时，请重试")
					//					}

				});

				console.log(item)
				if(item.formKey != null) {
					var formName = item.formKey.split(",")
				}
				if(formName != undefined && formName.length != 0) {
					for(var i = 0; i < formName.length; i++) {
						vm.$http.get('http://localhost/activiti-web/activitiTemplate/' + formName[i] + "?processInstanceId=" + vm.processInstanceId + "&&taskInstanceId=" + vm.taskInstanceId).then(
							function(data) {
								console.log(data)
								var url = {};
								url.url = data.config.url;
								var ifraUrlstart = data.config.url.lastIndexOf('/');
								var ifraUrlend = data.config.url.indexOf('.');
								url.id = data.config.url.substring(ifraUrlstart + 1, ifraUrlend)
								vm.diaFormData.push(url)
								console.log(vm.diaFormData)
							}).catch(function(error) {
							loading.close();
							console.log(error.response.status)
							if(error.response.status == 504) {
								vm.$message.error("网络超时，请重试")
							}

						})
					}
				}
			},
			seeEnclosure() {
				var vm = this;
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post('http://localhost/act/taskInstance/getTaskAttachments?processInstanceId=' + vm.processInstanceId + "&&taskId=" + vm.taskInstanceId).then(
					function(data) {
						console.log(data)
						vm.formUpload = data.data;
						loading.close()
					}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504) {
						that.$message.error("网络超时，请重试")
					}

				});
				vm.uploadVisible = true;
			},
			seeEnclosure() {
				var vm = this;
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post('http://localhost/act/taskInstance/getTaskAttachments?processInstanceId=' + vm.processInstanceId + "&&taskId=" + vm.taskInstanceId).then(
					function(data) {
						console.log(data)
						vm.formUpload = data.data;
						loading.close()
					}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504) {
						that.$message.error("网络超时，请重试")
					}

				});
				vm.uploadVisible = true;
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			formLoaded() {
				var vm = this
				setTimeout(function() {
					$('#huoduan_frame iframe').each(function() { //遍历拿到的form表单
						var formInit = $(this).contents().find('body #formJson_').text();
						if(formInit != "") {
							var formInitObj = JSON.parse(formInit); //初始化的数据存储在后端传的模板的p标签中
							console.log(formInitObj.object.areas)
							for(var key in formInitObj.object.areas) { //遍历初始化的数据中select的值 注意 数据中的key与select的name是一一对应的
								if($(this).contents().find('body form select[name=' + key + ']')) { //判断模板中是否存在数据中的需要的slelect 
									for(var i = 0; i < formInitObj.object.areas[key].length; i++) { //模板中有数据中的select 循环数据的数组 给当前select添加option选项 id是option的value
										$(this).contents().find('body form select[name=' + key + ']').append("<option value='" + formInitObj.object.areas[key][i].id + "'>" + formInitObj.object.areas[key][i].name + "</option>")
									}
								}
								//									
							}

							for(var i = 0; i < vm.initFormData.length; i++) {
								var id = vm.initFormData[i].formKey.indexOf('.');
								var iframrId = vm.initFormData[i].formKey.substring(0, id);
								if($(this).attr('id') == iframrId) {
									var obj =JSON.parse(vm.initFormData[i].formData) ;
									for(var key in obj) { //根据返回数据找到表单中所有name相同的标签 赋值 name必须唯一
										$(this).contents().find('body form input[name=' + key + ']').val(obj[key])
										$(this).contents().find('body form input[type=radio][name=' + key + ']').attr("checked", obj[key])
										$(this).contents().find('body form input[type=checkbox][name=' + key + ']').attr("checked", obj[key])
										$(this).contents().find('body form select[name=' + key + ']').val(obj[key])
									}
								}
							}

						}

						$(this).height($(this).contents().find('body').height() + 20);

					})

				}, 500)
			},

			diaLoad() {
				var vm = this;
				setTimeout(function() {
					$('#dialog-form iframe').each(function() {
						for(var i = 0; i < vm.hisFrmData.length; i++) {
							var id = vm.hisFrmData[i].formKey.indexOf('.');
							var iframrId = vm.hisFrmData[i].formKey.substring(0, id)
							if($(this).attr('id') == iframrId) {
								var obj=JSON.parse(vm.hisFrmData[i].formData);
								for(var key in obj) {
									$(this).contents().find('body form input[name=' + key + ']').val(obj[key])
									$(this).contents().find('body form input[type=radio][name=' + key + ']').attr("checked", obj[key])
									$(this).contents().find('body form input[type=checkbox][name=' + key + ']').attr("checked", obj[key])
									$(this).contents().find('body form select[name=' + key + ']').val(obj[key])
								}
							}
						}
						$(this).height($(this).contents().find('body').height() + 20);

					})

				}, 500)
			}
		}
	}
</script>